<template>
    <div :class="[selected ? 'rightCome' : 'rightLeave', 'view4']"></div>
</template>

<script>
export default {
    name: "view4",
    props: ["selected"]
}
</script>

<style scoped>
.view4 {
    width: 25%;
    height: 100%;
    background-color: yellow;
}

/* 过渡动画 */
.right-enter-from {
    transform: translateX(10%);
}
.right-enter-active {
    transition: transform .5s ease-out;
}
.right-enter-to {
    
}
.right-leave-from {
    /* transform: translateX(100%); */
}
.right-leave-active {
    transition: transform .5s ease-out;
}
.right-leave-to {
    /* opacity: 0; */
    transform: translateX(100%);
}
</style>